<template>
    <view class="page">
        <view class="status_bar bg-color"></view>
        <view :class="{nav:true,wechat:true,ipx:isIpx}">
            <view class="back" @click="back()"></view>
            <view class="title">搜索</view>
        </view>
        <view :class="{header:true,ipx:isIpx}">
            <view :class="{'search-header':true}" @click="isShow=true">
                <view class="search-wrap">
                    <view class="icon"></view>
                    <view class="search">输入商家名或菜品</view>
                </view>
            </view>
        </view>
        <view :class="{main:true,ipx:isIpx}">
            <view class="goods-wrap" v-for="(item,index) in searchGoods" :key="item.gid" v-if="searchGoods.length>0" @click="goPage('/pages/goods/index?branch_shop_id='+item.branch_shop_id+'&gid='+item.gid+'')">
                <view class="shop">
                    <view class="shop-name">{{item.branch_shop_name}}</view>
                    <view class="distance">{{item.distance}}</view>
                </view>
                <view class="goods-list">
                    <view class="image"><image :src="item.image"></image></view>
                    <view class="goods-info">
                        <view class="goods-title">{{item.title}}</view>
                        <view class="sales">销量：{{item.sales}}</view>
                        <view class="price-wrap">
                            <view class="price">￥{{item.price}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="no-data" v-if="searchGoods.length<=0">没有相关菜品！</view>
        <Search :show="isShow" @close="isShow=false" :isLocal="true"></Search>
    </view>
</template>

<script>
    import {mapState,mapActions} from "vuex";
    import Search from "../../components/search";
    export default {
        name: "search",
        data(){
            return {
                isShow:false
            }
        },
        onLoad(opts){
            //接收搜索关键词
            this.keywords=opts.keywords?decodeURIComponent(opts.keywords):"";
            this.lng=0;//经度
            this.lat=0;//纬度
            this.maxPage=0;//总页码数
            this.curPage=1;//当前页码
        },
        onShow(){
            uni.getLocation({
                type: 'gcj02',
                success:  (res)=> {
                    this.lng=res.longitude;
                    this.lat=res.latitude;
                    this.getSearchGoods({page:1,kwords:this.keywords,lng:this.lng,lat:this.lat,success:(pageNum)=>{
                        this.maxPage=pageNum;
                        }
                    })
                }
            });
        },
        computed:{
            ...mapState({
                isIpx:state=>state.system.isIpx,
                searchGoods:state=>state.search.searchGoods
            })
        },
        methods:{
            ...mapActions({
                getSearchGoods:"search/getSearchGoods",
                getSearchGoodsPage:"search/getSearchGoodsPage"
            }),
            back(){
                uni.navigateBack({
                    delta:1
                })
            },
            goPage(url){
                uni.redirectTo({
                    url
                })
            }
        },
        components:{
            Search
        },
        //上拉加载数据
        onReachBottom(){
            if(this.curPage<this.maxPage) {
                this.curPage++;
                this.getSearchGoodsPage({kwords:this.keywords,page:this.curPage,lng:this.lng,lat:this.lat});
            }
        },
    }
</script>

<style scoped>
    .page{width:100%;background-color:#FFFFFF;overflow:hidden;}
    .status_bar.bg-color{background-color:#E30019;}
    .nav{width:100%;height:88rpx;background-color:rgb(227, 0, 25);position: fixed;z-index:91;left:0;top:0;display: flex;justify-content: space-between;align-items: center;}
    .nav .back{width:40rpx;height:40rpx;background-image:url("~@/static/images/common/back.png");background-size:100%;background-repeat: no-repeat;background-position: center;}
    .nav .title{position: absolute;z-index:1;left:50%;top:50%;transform: translate(-50%,-50%);color:#FFFFFF;font-size:28rpx;}
    .header{width:100%;background-color:#eb1625;overflow:hidden;position: fixed;left:0;top:88rpx;z-index:90;}
    .search-header{width:100%;height:auto;display: flex;justify-content: center;align-items: flex-end;margin-top:88rpx;box-sizing: border-box;padding-bottom:20rpx;}
    .header .search-wrap{width:80%;height:52rpx;background-color:rgba(255,255,255,0.9);border-radius: 5px;display:flex;justify-content: start;align-items: center;}
    .header .search-wrap .icon{width:44rpx;height:44rpx;background-image:url("~@/static/images/main/search_icon.png");background-size:100%;background-repeat: no-repeat;background-position: center;margin:0 20rpx;}
    .header .search-wrap .search{font-size:28rpx;color:#999999;}

    .main{width:100%;margin:0 auto;margin-top:280rpx;overflow:hidden;}
    .goods-wrap{width:100%;overflow:hidden;margin-bottom:40rpx;border-bottom: 1px solid #EFEFEF;box-sizing: border-box;padding-left:50rpx;padding-right:50rpx;padding-bottom:50rpx;}
    .shop{width:100%;height:36rpx;display: flex;justify-content: space-between;align-items: center;overflow:hidden;}
    .shop .shop-name{font-size:36rpx;font-weight: bold;width:80%;height:54rpx;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}
    .shop .distance{font-size:24rpx;color:#666666;}
    .goods-list{width:100%;height:auto;display:flex;justify-content: space-between;margin-top:20rpx;}
    .goods-list .image{width:180rpx;height:180rpx;border-radius: 6px;}
    .goods-list .image image{width:100%;height:100%;border-radius: 6px;}
    .goods-list .goods-info{width:62%;height:auto;margin-right:20rpx;}
    .goods-list .goods-title{width:100%;height:80rpx;overflow:hidden;font-size:28rpx;color:#333333;font-weight: bold;}
    .goods-list .sales{font-size:24rpx;color:#999999;margin-top:10rpx;}
    .goods-list .price{font-size:28rpx;color:#fb4e44;font-weight: bold;}
    .goods-list .price-wrap{width:100%;margin-top:10rpx;display:flex;justify-content: space-between;}

    /*#ifdef MP-WEIXIN*/
    .nav.wechat{padding-top:70rpx;}
    .nav.wechat.ipx{padding-top:90rpx;}
    .nav.wechat .title{top:65%}
    .nav.wechat.ipx .title{top:75%}
    .header.ipx{top:170rpx;}
    .main.ipx{margin-top:330rpx;}
    /*#endif*/
</style>
